<template>
  <div class="institute-detail-box">
    <div class="content-box">
      <div class="left-content">
        <div class="title">{{ article.name }}</div>
        <div class="sub-desc">
          <span class="come" v-if="article.origin">来源 | {{ article.origin }}</span>
          <span class="anchor"
            >作者 |
            <span class="people" @click="toDetail">{{
              article.author
            }}</span></span
          >
          <span class="time">{{ formatDate(article.lastUpdate) }}</span>
        </div>
        <!-- 活动主题 -->
        <div class="theme-box">
          {{ article.summary }}
        </div>
        <!-- 标签 -->
        <div class="tags-box">
          <div class="tags">
            <div
              class="tag"
              v-for="(item, index) of article.tags"
              :key="index"
              @click="tagToDetail(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- <div class="fenxiang-box">
            <div class="label">分享到：</div>
            <div class="fenxiang-item">
              <img src="../../assets/wx.png" class="icon" alt="">
              微信
            </div>
            <div class="fenxiang-item">
              <img src="../../assets/xl.png" class="icon" alt="">
              新浪
            </div>
          </div> -->
        </div>
        <!-- 下载按钮组 -->
        <div class="btn-group">
          <el-button type="primary" v-if="article.files.length" @click="onDownLoad" style="background: #F96868; height: 48px; width: 152px; margin-right: 20px; border: none;">下载报告</el-button>
          <el-button type="primary" @click="onConcatUs" style="background: #F96868; height: 48px; width: 152px; border: none;">联系我们</el-button>
        </div>
        <!-- 目录 -->
        <DirectoryTree :article="article" />
      </div>
      <div class="right-content">
        <RelatedReport />
        <!-- 广告 -->
        <!-- <div class="advertising-box"></div> -->
        <!-- 广告 -->
        <div class="advertising-box" v-if="advertsItem.coverUrl" @click="onDetail(advertsItem)" >
          <div
            class="img"
            :style="{ backgroundImage: 'url(' + advertsItem.coverUrl + ')' }"
          ></div>
          <!-- <div class="title">{{ advertsItem.name }}</div> -->
        </div>
      </div>
    </div>
    <!-- 联系我们弹窗 -->
    <ContactUs :data="dialogData" />
  </div>
</template>

<script>
// 目录
import DirectoryTree from '@/views/instituteDetail/components/DirectoryTree';
// 相关报告
import RelatedReport from '@/views/instituteDetail/components/RelatedReport';
import { articlesDetail, downLoadReport } from "@/api/api";
import moment from "moment";
moment.locale("zh-cn");
import ContactUs from '@/components/ContactUs';
import {
  advertsList
} from "@/api/api";
export default {
  components: {
    DirectoryTree,
    RelatedReport,
    ContactUs
  },
  data() {
    return {
      article: {
        files: []
      },
      dialogData: {
        bSwitch: false
      },
      advertsItem: {

      }
    }
  },
  mounted() {
    const uuid = this.$route.query.uuid;
    this.getDetail(uuid);
    this.getAdverts()
  },
  watch: {
    '$route.query.uuid'(val) {
      this.getDetail(val);
    }
  },
  methods: {
    onDetail(item) {
      window.open(item.linkUrl, '_blank');
    },
    // 获取右侧广告
    async getAdverts() {
      const params = {
        status: 1,
        pageType: "QW_DETAIL_PAGE",
        type: "RECOMMEND",
      };
      const res = await advertsList(params);
      // 随机获取一个banner
      if (res.list.length) {
        const randomIndex = Math.floor(Math.random() * res.list.length);
        this.advertsItem = res.list[randomIndex];
      }
    },
    // 通过UUId 获取文章详情
    async getDetail(uuid) {
      const res = await articlesDetail(uuid);
      this.article = res.article;
    },
    // 处理时间
    formatDate(date) {
      return moment(date).format("ll");
    },
    // 点击作者跳转页面
    toDetail() {
      const params = {
        keywords: this.article.author,
        type: "anchor",
      };
      let routerJump = this.$router.resolve({
        name: "Search",
        query: params,
      });
      window.open(routerJump.href, "_blank");
    },
    tagToDetail(item) {
      const params = {
        keywords: item.name,
        type: 'tag',
        tagId: item.uuid
      };
      let routerJump = this.$router.resolve({ name: 'Search', query: params });
      window.open(routerJump.href, '_blank');
    },
    // 下载报告
    async onDownLoad() {
      const uuid = this.article.files[0].uuid;
      const res = await downLoadReport(uuid);
      window.open(res, '_blank')
    },
    // 联系我们
    onConcatUs() {
      this.dialogData.bSwitch = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.institute-detail-box {
  background: #F1F1F1;
  .content-box {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 40px;
    .left-content {
      width: 800px;
      float: left;
      margin-right: 40px;
      .title {
        width: 100%;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #272727;
        line-height: 42px;
        margin-bottom: 12px;
      }
      .sub-desc {
        font-size: 14px;
        font-weight: 400;
        color: #696969;
        line-height: 20px;
        margin-bottom: 24px;
        .come {
          margin-right: 24px;
        }
        .time {
          float: right;
        }
        .anchor {
          cursor: pointer;
          &:hover {
            .people {
              text-decoration: underline;
              color: #ff9195;
            }
          }
        }
      }
      .theme-box {
        width: 800px;
        padding: 20px 24px;
        box-sizing: border-box;
        border-radius: 4px;
        font-size: 16px;
        min-height: 91px;
        font-weight: 400;
        color: #696969;
        line-height: 28px;
        background: #F9F9F9 url('../../assets/66.png') no-repeat;
        background-size: 102px 75px;
        background-position: 8px 8px;
        margin-bottom: 40px;
      }
      .tags-box {
        overflow: hidden;
        margin-bottom: 52px;
        .tags {
          float: left;
          width: 530px;
          .tag {
            line-height: 18px;
            font-size: 12px;
            font-weight: 400;
            color: #696969;
            float: left;
            margin-right: 8px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #D8D8D8;
            padding: 7px 16px;
            margin-bottom: 8px;
            cursor: pointer;
            &:hover {
              border: 1px solid #ff9195;
              color: #f96868;
            }
          }
        }
        .fenxiang-box {
          float: right;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          .label {
            float: left;
            line-height: 32px;
          }
          .fenxiang-item {
            padding: 6px 12px;
            box-sizing: border-box;
            background: #F9F9F9;
            border-radius: 4px;
            line-height: 18px;
            margin-left: 8px;
            float: left;
            cursor: pointer;
            &:active {
              opacity: 0.8;
            }
            .icon {
              width: 20px;
              height: 20px;
              vertical-align: middle;
              margin-right: 4px;
            }
          }
        }
      }
      .btn-group {
        margin-bottom: 52px;
      }
    }
    .right-content {
      width: 340px;
      height: 800px;
      float: left;

      .advertising-box {
        cursor: pointer;
        margin-top: 32px;
        .img {
          width: 340px;
          height: 190px;
          background-repeat: no-repeat;
          background-size: contain;
          border-radius: 4px;
        }
      }
      // .advertising-box {
      //   width: 340px;
      //   height: 190px;
      //   background: url('../../assets/guanggao4.png') no-repeat;
      //   background-size: cover;
      // }
    }
  }
}
</style>